<template>
  <div id="endit">
    <div id="swiper">
      <p @click="$router.push('/index')">
        <van-icon name="arrow-left" />
      </p>
      <img :src="enditContent.image" alt />
    </div>
    <div class="two">
      <div class="top">
        <p>{{enditContent.name}}</p>
        <p>
          <span>月售1132份</span>&emsp;&emsp;好评率100%
        </p>
      </div>
      <div class="bottom">
        <p>
          <span>￥{{enditContent.price}}</span>
          <span>￥14</span>
        </p>
        <p>加入购物车·</p>
      </div>
    </div>
    <div class="three">
      <div>
        <p>商品介绍</p>
        <p v-show="enditContent.info == ''">当前商品没有介绍内容</p>
        <p>{{enditContent.info}}</p>
      </div>
    </div>
    <div class="four">
      <p>商品评价</p>
      <p>
        <span>全部</span>
        <span>推荐</span>
        <span>吐槽</span>
      </p>
      <p>
        <van-icon name="passed" />只看有内容的评价
      </p>
      <!-- {{enditContent}} -->
    </div>
    <ul class="five">
      <li v-for="(item,key) in enditContent.ratings" :key="key">
        <div>
          <p>{{item.rateTime |formate}}</p>
          <p>
            <span>{{item.username}}</span>
            <img :src="item.avatar" alt />
          </p>
        </div>
        <div>
          <van-icon name="good-job" color="#00a0dc" />
          <p>{{item.text}}</p>
          <p v-show="item.text==''">当前用户没有评价</p>
        </div>
      </li>
    </ul>
  </div>
</template>
<script>
import moment from "moment";
export default {
  data() {
    return {
      enditlist: [], //详情页数据
      arr: [],
      endit: [],
      enditContent: [] //详情页数据
    };
  },
  filters: {
    formate(val) {
      return moment(val).format("YYYY-MM-DD HH:mm:ss");
    }
  },
  mounted() {
    var name = this.$route.query.name;
    console.log(name);
    this.$http.get("/api/data.json").then(res => {
      this.enditlist = res.data.goods;
      //   console.log(this.enditlist);
      this.enditlist.forEach((item, key) => {
        this.arr = item;
        // console.log(this.arr);
        this.arr.foods.forEach((it, k) => {
          //   console.log(it);
          this.endit.push(it);
          // console.log(this.endit)
          var index = this.endit.findIndex((i, o) => {
            return i.name == name;
          });
          this.enditContent = this.endit[index];
          console.log(this.enditContent);
        });
      });
    });
  }
};
</script>
<style lang="scss" scoped>
#endit {
  width: 100%;
  height: 100%;
  background: #f3f5f7;
  overflow: auto;
  #swiper {
    position: relative;
    width: 100%;
    height: 750px;
    p{
      position: absolute;
      top: 20px;
      left: 20px;
      width: 50px;
      height: 50px;
      background: rgba(0,0,0,0.6);
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .van-icon {
      font-size: 25px;
     color: white;
    }
    img {
      width: 100%;
      height: 100%;
    }
  }
  .two {
    background: white;
    width: 100%;
    height: 216px;
    padding: 36px;
    border-bottom: 2px solid #eeeff0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .top {
      width: 100%;
      p {
        &:nth-of-type(1) {
          font-size: 28px;
          font-weight: 700;
          margin-bottom: 16px;
        }
        &:nth-of-type(2) {
          font-size: 20px;
          color: rgb(147, 153, 159);
        }
      }
    }
    .bottom {
      width: 100%;
      display: flex;
      justify-content: space-between;
      p {
        &:nth-of-type(1) {
          span {
            &:nth-of-type(1) {
              font-size: 28px;
              font-weight: 700;
              color: rgb(240, 20, 20);
              margin-right: 16px;
            }
            &:nth-of-type(2) {
              font-size: 20px;
              font-weight: 700;
              color: rgb(147, 153, 159);
            }
          }
        }
        &:nth-of-type(2) {
          width: 148px;
          height: 48px;
          background: rgb(0, 160, 220);
          border-radius: 24px;
          color: white;
          text-align: center;
          line-height: 48px;
        }
      }
    }
  }
  .three {
    margin-top: 32px;
    background: white;
    width: 100%;
    height: 254px;
    border-top: 2px solid #eeeff0;
    border-bottom: 2px solid #eeeff0;
    padding: 36px;
    div {
      width: 100%;
      height: 100%;
      p {
        &:nth-of-type(1) {
          font-size: 27px;
          color: black;
          font-weight: 600;
        }
        &:nth-of-type(2) {
          padding-left: 16px;
          margin-top: 12px;
          font-size: 24px;
          color: rgb(77, 85, 93);
          line-height: 48px;
        }
      }
    }
  }
  .four {
    padding: 36px 36px 0 36px;
    margin-top: 32px;
    border-top: 2px solid #eeeff0;
    width: 100%;
    height: 320px;
    background: white;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    p {
      &:nth-of-type(1) {
        font-size: 27px;
        color: black;
        font-weight: 600;
      }
      &:nth-of-type(2) {
        margin-top: 36px;
        margin-bottom: 36px;
        width: 390px;
        height: 68px;
        display: flex;
        justify-content: space-between;
        span {
          font-size: 24px;
          font-weight: 700;
          text-align: center;
          line-height: 68px;
          width: 118px;
          height: 100%;
          color: #686f75;
          &:hover {
            color: white;
          }
          &:nth-of-type(1) {
            color: white;
            background: #00a0dc;
          }
          &:nth-of-type(2) {
            background: #ccecf8;
          }
          &:nth-of-type(3) {
            background: #e9ebec;
          }
        }
      }
      &:nth-of-type(3) {
        width: 100%;
        height: 80px;
        border-top: 2px solid #f7f7f7;
        display: flex;
        align-items: center;
        font-size: 24px;
        color: rgb(147, 153, 159);
        // font-weight: 700;
        .van-icon {
          font-size: 30px;
          margin-right: 10px;
          background: #b7bbbf;
          color: white;
          border-radius: 50%;
        }
      }
    }
  }
  .five {
    width: 100%;
    border-top: 2px solid #eeeff0;
    background: white;
    display: flex;
    flex-direction: column;
    padding-left: 36px;
    padding-right: 36px;
    li {
      padding-top: 32px;
      padding-bottom: 32px;
      width: 100%;
      height: 134px;
      border-bottom: 2px solid #f7f7f7;
      div {
        width: 100%;
        &:nth-of-type(1) {
          display: flex;
          justify-content: space-between;
          align-items: center;
          p {
            &:nth-of-type(1) {
              font-size: 20px;
              color: rgb(147, 153, 159);
            }
            &:nth-of-type(2) {
              margin-top: 20px;
              display: flex;
              align-items: center;
              span {
                font-size: 20px;
                color: rgb(147, 153, 159);
              }
              img {
                margin-left: 12px;
                width: 24px;
                height: 24px;
              }
            }
          }
        }
        &:nth-of-type(2) {
          margin-top: 12px;
          display: flex;
          p {
            margin-left: 8px;
            font-size: 24px;
            color: rgb(7, 17, 27);
            line-height: 24px;
          }
        }
      }
    }
  }
}
</style>